<template>
  <el-card>
    <div slot="header">注册您的账号</div>
    <el-form
      v-show="!showDetails"
      ref="registerForm"
      :model="user"
      label-width="80px"
      :rules="rules"
    >
      <el-form-item label="账号" prop="account">
        <el-input
          v-model="user.account"
          placeholder="建议使用手机号"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="user.password" show-password></el-input>
      </el-form-item>
      <el-form-item label="角色">
        <el-radio-group v-model="user.role">
          <el-radio label="student">学员</el-radio>
          <el-radio label="teacher">教员</el-radio>
          <el-radio label="admin">管理员</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <transition name="fade">
      <!-- <other-person-info-form v-if="showDetails"></other-person-info-form> -->
      <el-form v-if="showDetails" ref="form" :model="user" label-width="80px">
        <!-- 上传头像的 -->
        <el-form-item label="上传头像">
          <el-upload
            class="avatar-uploader"
            :action="upload_path"
            :show-file-list="false"
            :on-success="onSuccess"
            :before-upload="onBeforeUpload"
          >
            <img v-if="imgSrc" :src="imgSrc" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="选择期班">
          <el-cascader v-model="user.period_class" :props="props"></el-cascader>
        </el-form-item>
        <el-form-item label="学业背景">
          <el-select v-model="user.academic_background" placeholder="">
            <el-option
              v-for="item in academics"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="岗位背景">
          <el-select v-model="user.position_background" placeholder="">
            <el-option
              v-for="item in posts"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </transition>
    <el-row style="width: 100%" :gutter="10">
      <el-col v-show="showDetails" :offset="6" :span="6"
        ><el-button @click="maybeLater" type="primary"
          >稍后设置</el-button
        ></el-col
      >
      <el-col :offset="6" :span="6"
        ><el-button @click="confirm" type="primary">{{
          showText
        }}</el-button></el-col
      >
    </el-row>
  </el-card>
</template>

<script>
// import OtherPersonInfoForm from "@/components/OtherPersonInfoForm.vue";
import { UPLOAD_PATH } from "@/utils/constant";
import {
  register,
  getAcademicBackground,
  getPositionBackground,
} from "@/services/auth";
import { getPeriodOrClass } from "@/services/user";
import { uploadImage } from "@/mixin";
import { Message } from "element-ui";
export default {
  name: "Register",
  mixins: [uploadImage],
  data() {
    return {
      academics: [
        "小学",
        "初中",
        "高中",
        "普通高中",
        "职业高中",
        "大专",
        "本科",
        "硕士",
        "博士",
      ],
      posts: ["外卖员", "程序员", "工程师", "工人", "教师", "医生"],
      user: {},
      showDetails: false,
      rules: {
        account: [
          { require: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            message: "用户名称长度不能小于3",
            trigger: "blur",
          },
        ],
      },
      // imageUrl: null,
      upload_path: UPLOAD_PATH,
      options: [],
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          // console.log('node',node);
          const value = node?.data?.value;
          // console.log('value: ', value);
          getPeriodOrClass(value).then((res) => {
            if (res.data.code == 200) {
              // console.log(res.data);
              resolve(res.data.data);
            }
          });
        },
      },
    };
  },
  methods: {
    returnToLogin() {
      this.$router.replace("/login");
    },
    onBeforeUpload(file) {
      this.beforeUpload(file);
    },
    onSuccess(response) {
      // console.log("response, file, fileList: ", response, file, fileList);
      // this.form.imageUrl = response.data[0].url;
      // console.log("response.data.url: ", response.data[0].url);
      const { url } = response.data[0];
      this.onUploaded(url);
    },
    handleChange(option) {
      console.log("option: ", option);
    },
    confirm() {
      this.$refs["registerForm"].validate((valid) => {
        if (!valid) {
          alert("表单错误");
        } else {
          if (this.showText === "下一步" && !this.showDetails) {
            this.showDetails = true;
            return;
          }
          // 可能性
          // 学员教员直接确定了，也有可能是学员设置了详细信息，然后点的下一步
          if (!this.showDetails) {
            console.log("其他角色进行注册");
            this.register();
          } else {
            console.log("学员设置好了个人信息进行注册");
            // this.register();
            const {
              account,
              password,
              role,
              period_class,
              position_background,
              academic_background,
            } = this.user;

            register(
              account,
              password,
              role,
              this.imgSrc,
              period_class,
              position_background,
              academic_background
            ).then((res) => {
              if (res.data.code == 200) {
                alert("注册成功");
                this.$router.replace("/login");
              } else {
                alert(res.data.message);
              }
            });
          }
        }
      });
    },
    maybeLater() {
      // 直接上传
      this.register();
    },
    register() {
      const { account, password, role } = this.user;
      // const { imageUrl: avatar, period_class } = this.form;

      register(account, password, role).then((res) => {
        if (res.data.code == 200) {
          alert("注册成功");
          this.$router.replace("/login");
        } else {
          alert(res.data.message);
        }
      });
    },
  },
  computed: {
    showText() {
      // 什么时候展示下一步：只有当用户选择了学员那一刻，才是下一步，而学员点击了下一步后应该是确定
      // return this.user.role == "student" ? "下一步" : "确定";
      if (this.showDetails === false && this.user.role == "student") {
        return "下一步";
      }
      return "确定";
    },
  },
  mounted() {
    getAcademicBackground().then((res) => {
      if (res.data.code == 200) {
        this.academics = res.data.data || [];
      } else {
        Message.warning("学位信息获取失败，请稍后重试");
      }
    });
    getPositionBackground().then((res) => {
      if (res.data.code == 200) {
        this.posts = res.data.data || [];
      } else {
        Message.warning("岗位信息获取失败，请稍后重试");
      }
    });
  },
};
</script>

<style lang='less' scoped>
.el-card {
  width: 40%;
  min-height: 400px;
  position: absolute;
  left: 30%;
  top: calc(50% - 200px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  :deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    // align-items: center;
  }
}
.returnToLogin {
  display: inline-block;
  margin-left: 10px;
  line-height: 40px;
  cursor: pointer;
  &:hover {
    color: #409eff;
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.avatar {
  width: 100px;
  height: 100px;
  object-fit: cover;
}
</style>